<template>
  <div class="info-tip">
    <ul>
      <li>
        <i class="iconfont tm"></i>
        <div>
          <h4>今日录码</h4>
          <p>{{ (json.todayRecordCount||0) | formatNum}}</p>
        </div>
      </li>
      <li>
        <i class="iconfont xfz"></i>
        <div>
          <h4>被消费者查看共计</h4>
          <p>{{ (json.customerViewCount||0 )| formatNum}}</p>
        </div>
      </li>
      <li>
        <i class="iconfont ck"></i>
        <div>
          <h4>今日出库</h4>
          <p>{{ (json.outStockCount||0) | formatNum}}</p>
        </div>
      </li>
      <li>
        <i class="iconfont kc"></i>
        <div>
          <h4>当前库存（个）</h4>
          <p>{{ (json.stockCount||0) | formatNum}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default ({
    props: ["json"],//接收传递进来的数据
    data() {
      return {}
    },
    filters: {
      //千分符
      formatNum(num) {
        return (num + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
      }
    }
  })
</script>

<style scoped>
  .info-tip {
    margin: 20px 0 0;
  }

  ul {
    width: 960px;
    display: flex;
    justify-content: space-between;
  }

  li {
    width: 200px;
    height: 77px;
    padding-top: 22px;
    padding-left: 20px;
    display: flex;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
  }

  li i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 22px;
  }

  .tm {
    background: #409feb;
  }

  .tm:before {
    content: "\e602";
  }

  .xfz {
    background: #8dd272;
  }

  .xfz:before {
    content: "\e603"
  }

  .ck {
    background: #ffd263;
  }

  .ck:before {
    content: "\e609"
  }

  .kc {
    background: #f17971;
  }

  .kc:before {
    content: "\e64e"
  }

  li h4 {
    font-size: 12px;
    font-weight: normal;
    color: #666;
  }

  li p {
    font-size: 26px;
    color: #666;
  }
</style>
